*{
	margin: 0;padding: 0;
}
.music{
	position: absolute;
	top: 20px;left: 10px;
}
.snow-canvas {
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: fixed;
		pointer-events: none;
		z-index: 1000;
	}
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
	background:#676b57;padding: 20px 0 0 0;
	text-align: center; height:660px;
}
.title p{
	font-family: 'BebasNeueRegular';
	font-size: 40px;font-weight: bold;
	text-transform: capitalize;
}
.title span{
	 margin-right: 5px;
}
@-webkit-keyframes inturn{
	20%{color:#036564;}
	60%{color: #1C94C4;}
	100%{color: #1BA55E;}
}
.title span:nth-child(1){ -webkit-animation: inturn 0.2s ease 0.2s ; }
.title span:nth-child(2){ -webkit-animation: inturn 0.2s ease 0.4s  ; }
.title span:nth-child(3){ -webkit-animation: inturn 0.2s ease 0.6s  ; }
.title span:nth-child(4){ -webkit-animation: inturn 0.2s ease 0.8s  ; }
.title span:nth-child(5){ -webkit-animation: inturn 0.2s ease 1s  ; }
.title span:nth-child(6){ -webkit-animation: inturn 0.4s ease 1.2s  ;margin-left: 20px; }
.title span:nth-child(7){ -webkit-animation: inturn 0.4s ease 1.4s  ; }
.title span:nth-child(8){ -webkit-animation: inturn 0.4s ease 1.6s  ; }
.title span:nth-child(9){ -webkit-animation: inturn 0.2s ease 1.8s  ; }
.title span:nth-child(10){ -webkit-animation: inturn 0.2s ease 2s  ; }
.title span:nth-child(11){ -webkit-animation: inturn 0.2s ease 2.2s  ; }
.title span:nth-child(12){ -webkit-animation: inturn 0.4s ease 2.4s  ; }
.title span:nth-child(13){ -webkit-animation: inturn 0.4s ease 2.6s  ; }
.title span:nth-child(14){ -webkit-animation: inturn 0.4s ease 2.8s  ; }
/*picture*/
.picture  img{ width: 60px;height: 80.1px;position: absolute;transition: all 1s ease;}
.picture span { position: absolute;}
.img1 img:hover{width: 200px;height: 267px;position: fixed;-webkit-animation: dd 12s ease;}
@-webkit-keyframes dd{
	5%{top: 240px;left:300px ;}
	20%{top: 240px;left: 200px;transform: rotateZ(360deg);-webkit-transform: rotateZ(360deg);}
	30%{top:240px;left: 100px;transform: rotateY(0deg);-webkit-transform:rotateY(0deg) ;}
	60%{top: 240;left: 100px;transform: rotateY(360deg);-webkit-transform:rotateY(360deg) ;}
	100%{top: 240px;left: 100px;transform: rotateY(360deg);-webkit-transform:otateY(360deg) ;}
}

.picture span:nth-child(1){top: 240px;left:720;z-index: 600;}
.picture span:nth-child(2){top: 220px;left:730px;z-index: 580;}
.picture span:nth-child(3){top: 200px;left: 780px;z-index: 560;}
.picture span:nth-child(4){top: 180px;left: 830px;z-index: 540;}
.picture span:nth-child(5){top: 160px;left: 880px;z-index: 520;}
.picture span:nth-child(6){top: 190px;left: 930px;z-index: 500;}
.picture span:nth-child(7){top: 210px;left: 980px;z-index: 480;}
.picture span:nth-child(8){top: 240px;left: 1010px;z-index: 460;}
.picture span:nth-child(9){top: 300px;left: 990px;z-index: 440;}
.picture span:nth-child(10){top: 330px;left: 950px;z-index: 420;}
.picture span:nth-child(11){top: 360px;left: 910px;z-index: 400;}
.picture span:nth-child(12){top: 390px;left: 880px;z-index: 380;}
.picture span:nth-child(13){top: 420px;left: 840px;z-index: 360;}
.picture span:nth-child(14){top: 450px;left: 800px;z-index: 340;}
.picture span:nth-child(15){top: 480px;left: 760px;z-index: 320;}
.picture span:nth-child(16){top: 510px;left: 720px;z-index: 300;}
.picture span:nth-child(17){top: 530px;left: 680px;z-index: 280;}
.picture span:nth-child(18){top: 220px;left: 630px;z-index: 580;}
.picture span:nth-child(19){top: 200px;left: 580px;z-index: 560;}
.picture span:nth-child(20){top: 180px;left: 530px;z-index: 540;}
.picture span:nth-child(21){top: 160px;left: 480px;z-index: 520;}
.picture span:nth-child(22){top: 190px;left: 430px;z-index: 460;}
.picture span:nth-child(23){top: 210px;left: 380px;z-index: 440;}
.picture span:nth-child(24){top: 240px;left: 340px;z-index: 420;}
.picture span:nth-child(25){top: 300px;left: 360px;z-index: 400;}
.picture span:nth-child(26){top: 330px;left: 400px;z-index: 380;}
.picture span:nth-child(27){top: 360px;left: 440px;z-index: 360;}
.picture span:nth-child(28){top: 390px;left: 470px;z-index: 340;}
.picture span:nth-child(29){top: 420px;left: 500px;z-index: 320;}
.picture span:nth-child(30){top: 450px;left: 540px;z-index: 300;}
.picture span:nth-child(31){top: 480px;left: 580px;z-index: 280;}
.picture span:nth-child(32){top: 510px;left: 620px;z-index: 580;}
.picture span:nth-child(33){top: 240px;left: 710px;z-index: 600;}
.picture span:nth-child(34){top: 180px;left: 530px;z-index: 540;}
.picture span:nth-child(35){top: 160px;left: 480px;z-index: 520;}
.footer{
	position: fixed;bottom: 0px;
	height: 30px;line-height: 30px;
	color: gray;background: black;
	width: 100%;text-transform: capitalize;
	font-weight:600;
}
.footer span{
	font-size: 30px;vertical-align: middle;
	margin-right: 10px;
}
/*H2样式*/
.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 4em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}
.link--surinami {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 4em;
	color: #3A4945;
	padding: 0 0 0.125em;
}

.link--surinami::before,
.link--surinami::after {
	content: '';
	width: 100%;
	height: 3px;
	z-index: -1;
	background: #3A4945;
	position: absolute;
	-webkit-transform: scale3d(0,1,1);
	transform: scale3d(0,1,1);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.link--surinami::before {
	right: 0;
	top: 0;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.link--surinami::after {
	left: 0;
	bottom: 0;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.link--surinami:hover::before,
.link--surinami:hover::after {
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.link--surinami span {
	position: relative;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}

.link--surinami:hover span {
	color: transparent;
}

.link--surinami span::before,
.link--surinami span::after {
	position: absolute;
	color: #fff;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.link--surinami span::before {
	content: attr(data-letters-l);
	left: 0;
	-webkit-transform: translate3d(-5px,0,0);
	transform: translate3d(-5px,0,0);
}

.link--surinami span::after {
	content: attr(data-letters-r);
	right: 0;
	-webkit-transform: translate3d(5px,0,0);
	transform: translate3d(5px,0,0);
}

.link--surinami:hover span::before,
.link--surinami:hover span::after {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}